<script setup>
import {onMounted, reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}"),
  port: 'http://localhost:9999',
  name: '',
  classificationList:[],
  classificationButton: [],
  detailsList: [],
})

onMounted(() => {
  load()
})

const load = () => {
  request.get('/drugClassification/selectAll').then(res => {
    data.classificationList = res.data.map(item => item.name)
    data.classificationButton[0] = true
    handleClassificationClick(data.classificationList[0],0)
  })
}

const handleClassificationClick = (classification,index) => {
  // 重置所有诊室按钮状态为false
  resetClassificationButtons()
  // 设置当前点击的按钮为true
  data.classificationButton[index] = true
  selectDetailsByClassificationName(classification) // 数据库中id是从1开始的,存在一定风险
}

const resetClassificationButtons = () => {
  data.classificationButton = data.classificationButton.map(() => false)
}

const selectDetailsByClassificationName = (classification) => {
  request.get('/drugDetails/selectDetailsByClassificationName', {
    params: {
      classificationName: classification
    }
  }).then(res => {
    if (res.code === '200'){
      data.detailsList = res.data
      // console.log(data.detailsList)
    }else{
      ElMessage.error(res.msg)
    }
  })
}

</script>

<template>
  <div>
    <!--      搜索框-->
    <div class="card" style="margin-bottom: 5px;margin-top: 10px;display: flex;align-items: center">
      <el-input style="width: 260px; margin-right: 5px" placeholder="请输入药品名称查询" v-model="data.name" :prefix-icon="Search" clearable></el-input>
      <el-button type="primary">查 询</el-button>
      <el-button>重 置</el-button>
    </div>

    <!--      主体-->
    <div class="card" style="margin-top: 10px;height: 82vh">
      <el-container>
        <!--    药品分类选择-->
        <el-aside width="100px" style="background-color: #fcfcfc;padding: 5px">
          <div style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column">
            <div class="select-classification-box"
                 v-for="(classification, index) in data.classificationList"
                 :key="index"
                 :class="data.classificationButton[index] ? 'dept-box-primary' : 'dept-box-info'"
                 @click="handleClassificationClick(classification,index)"
            >
              <span style="font-size: 15px">{{ classification }}</span>
            </div>
          </div>

        </el-aside>

        <!--          药品卡片-->
        <el-main style="padding: 0 10px">
          <div class="content-wrapper">
            <div>
              <div
                  class="card"
                  v-for="details in data.detailsList"
                  :key="details.id"
                  style="margin-bottom: 10px"
                  @click="router.push(`/home/drugDetails?selectedDetails=${encodeURIComponent(JSON.stringify(details))}`)"
              >
                <div style="width: 100%;display: flex;flex-direction: row">
                  <el-image
                      v-if="details.img"
                      style="flex-shrink: 0;width: 80px; height: 80px; object-fit: cover"
                      :src="data.port+details.img"
                      fit="fill"
                  />
                  <div style="margin-left: 5px;display: flex;flex-direction: column;height: 100%;width: 100%;">
                    <div>{{ details.name }}</div>
                    <div style="margin-top: auto;display: flex; justify-content: space-between; align-items: center;">
                      <div style="color: red">￥{{details.price}}</div>
                      <div style="background-color: #4cdffa;border-radius: 50%;width: 20px;height: 20px;display: flex;justify-content: center;align-items: center">
                        <el-icon><ShoppingCart /></el-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </el-main>

      </el-container>
    </div>
  </div>
</template>

<style scoped>
.select-classification-box {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: rgba(0, 0, 0, 0.14) 1px solid;
}

.dept-box-primary {
  background-color: rgba(64, 158, 255, 0.86);
  border-color: #409eff;
  color: white;
}

.content-wrapper {
  flex: 1;
  overflow-y: auto;
  height: 100%;
}
</style>
